<template>
  <div class="baby">
    <AppTopNav />

    <MyHeader :show="showCom" :fromCount="addall" />
    <div class="bar">
      <p style="font-size: 12px">全部商品 > 孕婴</p>
    </div>
    <div class="content">
      <div class="floor">
        <div class="floor-one">
          <span class="fp">分类:</span>
          <span>居家生活</span>
          <span>母婴亲子</span>
        </div>
        <div class="floor-two">
          <span class="fp">排序:</span>
          <span class="moren">默认</span>
          <span>价格</span>
          <span class="js">
            <input type="text" palceholder="￥" />
            <span style="margin-left: 19px">-</span>
            <input type="text" palceholder="￥" />
            <el-button style="margin-left: 20px">确定</el-button>
            <span class="qk" style="margin-left: 20px">清空</span>
          </span>
        </div>
      </div>
      <div class="gu">
        <ul class="goods-list">
          <li
            style="background-color: #fff"
            class="item"
            v-for="i in 6"
            :key="i"
          >
            <img src="https://yanxuan-item.nosdn.127.net/e7b0e22e7faec1712b1c09abdbc717aa.png?type=webp&quality=95&thumbnail=245x245&imageView" />
            <div style="font-size: 13px" class="title ellipsis">
              宝宝防护城堡，儿童垂直升降床护栏
            </div>
            <div class="price">
              ￥456
              <del>￥789</del>
            </div>
            <buyLog @addCount="toCount" />
          </li>
        </ul>
      </div>
      <!--兴趣专题 -->
      <div class="intrest">
        <div><h2>你可能感兴趣的专题</h2></div>
        <div class="gjp">
          <ul class="goods-list">
            <li
              class="item"
              v-for="i in 3"
              :key="i"
              style="width: 330px; height: 270px; background-color: #fff"
            >
              <img
                src="https://yanxuan.nosdn.127.net/d965a837877abe2313cc0217f1a79c7b.jpg?type=webp&imageView&quality=95&thumbnail=330y188"
                style="width: 330px; height: 188px"
              />
              <div class="ellipsis" style="font-size: 17px">
                婴儿护理产品怎么选
              </div>
              <p style="margin-top: 10px">屁屁湿巾、护肤品、牙刷选购知识</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 猜你喜欢 -->
      <div class="might">
        <div><h1>猜你喜欢</h1></div>
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item v-for="item in 4" :key="item">
            <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
            <a href="#/"
              ><img
                src="https://yanxuan-item.nosdn.127.net/493def8016c377b5efe27be88e45788c.png?type=webp&imageView&quality=95&thumbnail=210x210"
                alt=""
                style="margin-left:100px;"
            /></a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>
  

<script>
import AppTopNav from "@/components/AppTopNav.vue";
import MyHeader from "@/components/MyHeader.vue";
import buyLog from "@/components/buyLog.vue";
import { ref } from "vue";
import { onMounted } from "vue";
export default {
  components: {
    AppTopNav,
    MyHeader,
    buyLog,
  },
  setup({ emit }) {
    onMounted(() => {
      bin();
    });
    const showCom = ref(true);
    function bin() {
      showCom.value = false;
    }

    const addall = ref(0);
    function toCount(e) {
      addall.value = e;
    }
    return { bin, showCom, toCount, addall };
  },
};
</script>

<style lang="less" scoped>
.baby {
  .bar {
    height: 60px;
    background-color: #f2f2f2;
    padding: 0 100px;
    line-height: 60px;
  }
  .floor {
    margin: 10px 105px;
    .floor-one,
    .floor-two {
      height: 40px;
      margin: 30px 0;
      border-bottom: 1px #b4a078 dashed;
      .js {
        input {
          height: 23px;
          width: 70px;
        }
        .qk:hover {
          color: #b4a078;
        }
      }
    }
    span {
      margin-right: 20px;
    }
    .fp {
      color: #999;
    }
    .moren {
      color: #b4a078;
    }
  }
  .content {
    .gu {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 100px;
      .item:hover {
        background-color: rgb(252, 244, 244) !important;
      }
      img:hover{
        content: url(../../assets/images/82f47daee4df99026a0348b2b87d27a3.webp) !important;
      }
    }
    .intrest {
      flex-direction: column;
      h2 {
        margin-left: 100px;
      }
      .gjp {
        display: flex;
        justify-content: flex-start;
        padding: 0 100px;
      }
    }
    .might {
      flex-direction: column;
      
      h1 {
        margin-left: 100px;
      }
      .gjp {
        display: flex;
        justify-content: flex-start;
        padding: 0 100px;
      }
    }
  }
  .goods-list {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 40px;
    flex-wrap: wrap;
    .item {
      width: 245px;
      height: 400px;
      margin: 20px 5px 40px 5px;
      background-color: #f5f5f5;
      img {
        width: 245px;
        height: 240px;
      }
      .hoverShadow();
      .title {
        font-size: 17px;
        text-align: center;
        padding: 15px 25px;
      }
      .price {
        text-align: center;
        font-size: 15px;
        color: @priceColor;
        del {
          color: #666;
        }
      }
    }
  }
}
</style>